<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="/css/css.css" />
	<script src="/js/public.js"></script>
	<script src="/js/jquery.min.js"></script>
	<script src="/js/socket.io.js"></script>
	<script src="/js/circle-progress.js"></script>
	<title>鹤庭净水</title>
	<style type="text/css">
	</style>
</head>
<body>
	<!-- 调用滤芯剩余百分比数值 -->
	<input type="hidden" value="{{ $state['filter1'] or 0}}" class="percent1" />
	<input type="hidden" value="{{ $state['filter2'] or 0}}" class="percent2" />
	<input type="hidden" value="{{ $state['filter3'] or 0}}" class="percent3" />
	<input type="hidden" value="{{ $state['filter4'] or 0}}" class="percent4" />
	<input type="hidden" value="{{ $state['filter5'] or 0}}" class="percent5" />
	<input type="hidden" value="{{ $state['decStatus'] or 0}}" class="decStatus" />
	<!-- content page start -->
	<section class="statusPart">
		<!-- header part -->
		<section class="top">
			<img class="topLeft" onclick="window.location.href='/user/infoManage';" src="/img/personalLogo.png" />
			<img class="topRight" onclick="window.location.href='/device/deviceInfo';" src="/img/addPic.png"/>
		</section>
		<!-- action status part -->
		<section class="outerRing"></section>
		<section class="hetingTitle">HETING</section>
		<section class="statusBg"></section>
		<section class="wash" style="display: none;"></section><!-- 冲洗 -->
		<section class="add_water" style="display: none;"></section><!-- 制水 -->
		<section class="offTxtBg" style="display: none;"></section><!-- 关机 -->
		<section class="service" style="display: none;"></section><!-- 检修 -->
		<section class="lessWater" style="display: none;"></section><!-- 缺水 -->
		<section class="fullWater1" style="display: none;"></section><!-- 水满 -->
		<section class="fullWater2" style="display: none;"></section><!-- 水满 -->
		<section class="arrearage" style="display: none;"></section><!-- 欠费 -->
		<section class="arrearageText" style="display: none;"></section><!-- 欠费 -->
		<section class="halt" style="display: none;">设备已停机，请联系服务人员！</section><!--停机-->
		<section class="leakage_whisht" style="display: none;"></section><!-- 漏水 -->
		<section class="leakage_act" style="display: none;"></section><!-- 漏水 -->
		<section class="textList" style="display: none;"><!-- 开机状态时候显示文本 -->
			<p class="TdsNumValue">{{ $state['TDS2'] or '000'}}</p>
			<p class="TdsLine"></p>
			<p class="TdsTitle">TDS</p>
			<p class="RawWater">源水<span class="rawwaterNum">{{ $state['TDS1'] or '000'}}</span></p>
		</section>
		<section class="statusName">{{ $state['decStatusDescription'] or '离线'}}</section>
	</section>
	<!-- center part -->
	<section class="exchangePart">
		<section class="surplus">
			<section class="surplusPic"></section>
			<section class="surplusTxt">剩余流量</section>
			<section class="surplusNum">{{ $state['residualFlow'] or 0}}</section>L
		</section>
		<section class="shopping">
			<p class="shopLog"></p>
			<p class="checkPayment" onclick="window.location.href='user/checkPayment'">缴费查询</p>
			<p class="shopFlux" onclick="window.location.href='user/payFlux'">购买流量</p>
		</section>
	</section>
	<!-- filter part -->
	<section class="filterList">
        <div class="circles">
            <div class="first circle">
                <strong></strong>
                <span>1</span>
            </div> 
            <div class="second circle">
                <strong></strong>
                <span>2</span>
            </div>
            <div class="third circle">
                <strong></strong>
                <span>3</span>
            </div>
            <div class="forth circle">
                <strong></strong>
                <span>4</span>
            </div>
            <div class="five circle">
                <strong></strong>
                <span>5</span>
            </div>
        </div>
	</section>
	<!-- button part -->
	<section class="btnPart">
		@if(isset($state['decStatus']) && $state['decStatus'] != 7)
		<a class="power_off" >关机</a>
		@else
		<a class="power_off" >开机</a>
		@endif
		<a class="washBtn" >冲洗</a>
	</section>
	<!-- 滤芯提示框 -->
	<section class="filter_bg">
		<section class="filter_box">
			<section class="hintTitle">滤芯信息</section>
			<p><span>剩余寿命：</span>
				<span class="second residueNum"></span>
				<a class="buy_btn" href="http://www.hetingwater.com/">购买滤芯</a>
			</p>
			<P><span>官方网站：</span>
				<a class="second" href="http://www.hetingwater.com/">www.hetingwater.com</a>
			</P>
			<p><span>客服热线：</span>
				<a href="tel:400-800-7851" class="telephone">400-800-7851</a>
				
			</p>
			<section class="hintBtn">
				<a class="callOff">取消</a>
				<a class="reset">立即复位</a>
			</section>
		</section>
	</section>
	<!-- 确认取消提示start -->
	<section class="undbing_bg">
		<section class="undbing_box">
			<p>确定要立即复位吗？</p>
			<section style="margin-top: 3.5rem">
				<a class="no_btn" >取消</a>
				<a class="yes_btn">确定</a>
			</section>
		</section>
	</section>
	<!-- 提交信息服务器反馈提示信息-->
	<section class="hint_bg">
		<section class="hint_box">
			<p class="hint_text" style="margin-top: 2.5rem;"></p>
			<section class="hint_btn" style="margin: 2rem auto;">确定</section>
		</section>
	</section>

</body>
</html>
<script>
filterFn();
//异步传输数据
    var i=0;
    var socket = io('{{ $host }}:6001');
    socket.on('device-{{ $state['deviceCode'] }}:App\\Events\\DeviceInfoUpdate', function(message){
    	// console.log(message);
    	if($(".percent1").val()!=message.deviceData['filter1']||
    		$(".percent2").val()!=message.deviceData['filter2']||
    		$(".percent3").val()!=message.deviceData['filter3']||
    		$(".percent4").val()!=message.deviceData['filter4']||
    		$(".percent5").val()!=message.deviceData['filter5']){
	        $(".percent1").val(message.deviceData['filter1']);
	        $(".percent2").val(message.deviceData['filter2']);
	        $(".percent3").val(message.deviceData['filter3']);
	        $(".percent4").val(message.deviceData['filter4']);
	        $(".percent5").val(message.deviceData['filter5']);
	        filterFn();
    	}
        $(".TdsNumValue").html(message.deviceData['TDS2']);
        $(".rawwaterNum").html(message.deviceData['TDS1']);
        $(".statusName").html(message.deviceData['decStatusDescription']);
        $(".surplusNum").html(message.deviceData['residualFlow']);
        switch (message.deviceData['decStatus']){
   			// 1 => 制水
        	case 2://缺水
        		lessWater();
        		break;
        	case 3://水满
        		fullWater();
        		break;
        	case 4://检修
        		service();
        		break;
        	case 5://冲洗
        		wash();
        		break;
        	case 6://欠费
        		arrearage();
        		break;
        	case 7://关机
        		shutDown();
        		break;
        	case 8://漏水
        		leakage();
        		break;
        	case 9://停机
        		halt();
        		break;
        	default:
        		addWater();
        		break;
        }
        i=0;
    });
    // 每隔90秒判定设备是否离线
    setInterval(function(){
        i++;
        if(i == 90){
            offLine();
            $(".statusName").html("离线");
            filterFn();             
            hint('设备处于离线状态');       
        }
    }, 1000);
    
</script>
